<template>
	<view class="VoiceBtn">
		<template v-if="!recording">
			<view class="title">按住说话</view>
			<view class="tip">松开手指，发送语音，向上滑取消</view>
		</template>

		<template v-else>
			<view class="recordingUI">
				<image class="voiceLeft" src="../../../static/image/Chat/VoiceBtn/v-L.gif"></image>
				<view class="time">{{ timer }}</view>
				<image class="voiceRight" src="../../../static/image/Chat/VoiceBtn/v-R.gif"></image>
			</view>
		</template>

		<image class="voiceImg" :src="voiceImg" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceError"></image>
	</view>
</template>

<script>
// 录音组件，H5不能录音
export default {
	created() {
		this.initRecord();
	},
	computed: {
		timer() {
			let minute = parseInt(this.recordLength / 60);
			if (minute < 10) {
				minute = '0' + minute;
			}

			let second = this.recordLength % 60;
			if (second < 10) {
				second = '0' + second;
			}
			return minute + ':' + second;
		}
	},
	data() {
		return {
			voiceConfig: {
				default: require('@/static/image/Chat/VoiceBtn/yunyin1@2x.png'),
				start: require('@/static/image/Chat/VoiceBtn/yunyin1@2x.png')
			},
			voiceImg: '',
			initPoint: { identifier: 0, Y: 0 },
			RECORDER: null,
			voiceCancel: false,
			recording: false,
			recordTimer: null,
			// 录音长度，用于显示
			recordLength: 0
		};
	},
	methods: {
		// 初始化监听语音相关事件
		initRecord() {
			this.voiceImg = this.voiceConfig.default;
			this.RECORDER = uni.getRecorderManager();
			//录音开始事件
			this.RECORDER.onStart(e => {
				// #ifndef H5
				this.recordBegin(e);
				// #endif
			});
			//录音结束事件
			this.RECORDER.onStop(e => {
				this.recordFile(e);
			});
		},
		// 准备录音
		voiceBegin(e) {
			// 只允许单点触摸
			if (e.touches.length > 1) {
				return;
			}
			this.initPoint.Y = e.touches[0].clientY;
			this.initPoint.identifier = e.touches[0].identifier;
			// #ifndef H5
			this.RECORDER.start({ format: 'mp3' }); //录音开始
			// #endif

			// H5下看个效果
			// #ifdef H5
			this.recordBegin(e);
			// #endif
		},
		// 录音中(判断是否触发上滑取消发送)
		voiceIng(e) {
			// 判断当前是否录音中
			if (!this.recording) {
				return;
			}
			let touche = e.touches[0];
			//上滑一个导航栏的高度触发上滑取消发送
			if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
				this.voiceCancel = true;
				this.$u.toast('已取消')
				this.voiceEnd();
			}
		},
		// 结束录音
		voiceEnd(e) {
			clearInterval(this.recordTimer);
			this.voiceImg = this.voiceConfig.default;
			this.recording = false;
			// #ifndef H5
			this.RECORDER.stop(); //录音结束
			// #endif
		},
		// 录音被打断
		voiceError() {
			this.voiceCancel = true;
			this.$u.toast('已取消')
			this.voiceEnd();
		},
		//录音开始
		recordBegin(e) {
			this.voiceCancel = false;
			this.recording = true;
			this.recordLength = 0;
			this.voiceImg = this.voiceConfig.start;
			this.recordTimer = setInterval(() => {
				this.recordLength++;
			}, 1000);
		},
		//录音结束(回调文件)
		recordFile(e) {
			this.$u.toast(!this.voiceCancel)
			if (!this.voiceCancel) {
				if (this.recordLength < 1) {
					this.$u.toast('录音时间过短')
					return;
				}
				this.$emit('handleEvent', 'voice', e);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.VoiceBtn {
	width: 100%;
	height: 300rpx;
	background-color: #f3f3f3;
	display: flex;
	flex-direction: column;
	align-items: center;

	.title {
		margin-top: 40rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #656565;
		line-height: 30rpx;
	}

	.tip {
		margin-top: 15rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #a9a9a9;
		line-height: 30rpx;
		margin-bottom: 21rpx;
	}

	.recordingUI {
		margin-top: 57rpx;
		margin-bottom: 41rpx;
		display: flex;
		width: 335rpx;
		justify-content: space-between;
		align-items: center;

		.time {
			font-size: 28rpx;
			font-weight: 500;
			color: #cb9965;
			line-height: 30rpx;
		}

		.voiceLeft {
			width: 111rpx;
			height: 44rpx;
		}

		.voiceRight {
			width: 111rpx;
			height: 44rpx;
		}
	}

	.voiceImg {
		width: 165rpx;
		height: 165rpx;
	}
}
</style>
